<script setup>
import { useI18n } from 'vue-i18n'
import { NButton } from 'naive-ui'
const { t } = useI18n()

const data = Array.from({ length: 8 }).map((_, index) => ({
  name: `Edward King ${index}`,
  age: 32,
  address: `London, Park Lane no. ${index}`
}))

const columns = computed(() => {
  return [
    {
      titleAlign: 'center',
      title(column) {
        return h(
          'div',
          {
            style: {
              fontSize: '24px',
              fontBold: 'weight',
              display: 'flex',
              justifyContent: 'center',
              alignItems: 'center',
              position: 'relative'
            }
          },
          {
            default: () => {
              return [
                h('div', null, {
                  default: () => 'VLAN'
                }),
                h(
                  NButton,
                  {
                    type: 'primary',
                    tertiary: true,
                    style: {
                      position: 'absolute',
                      right: '0px',
                      bottom: '0px'
                    },
                    onClick: () => {
                      console.log('点击了')
                    }
                  },
                  {
                    default: () => '添加'
                  }
                )
              ]
            }
          }
        )
      },
      children: [
        {
          title: 'VLAN',
          key: 'name',
          fixed: 'left'
        },
        {
          title: t('device.TaggedMembers'),
          key: 'IP'
        },
        {
          title: t('device.UntaggedMembers'),
          key: 'MAC'
        },
        {
          title: t('system.operation'),
          key: 'state',
          fixed: 'right',
          width: 200,
          render: (row) => {
            return h(
              NButton,
              {
                tertiary: true,
                onClick: () => sendMail(row),
                style: {
                  marginRight: '2px'
                }
              },
              { default: () => t('system.modify') }
            )
          }
        }
      ]
    }
  ]
})
</script>

<template>
  <n-data-table :columns="columns" :data="data" :row-key="(row) => row.address" :scroll-x="400" />
</template>

<style scoped></style>
